<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>02 - createClass PropTypes with validation errors</title>
</head>
<body>
<div id="react-container"></div>

<script src="https://unpkg.com/prop-types/prop-types.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.js"></script>

<script type="text/babel">

    const { Component } = React
    const { render } = ReactDOM

    class Summary extends Component {

        static propTypes = {
            ingredients: PropTypes.array,
            steps: PropTypes.array,
            title: PropTypes.string
        }

        render() {
            const {ingredients, steps, title} = this.props
            return (
              <div className="summary">
                <h1>{title}</h1>
                <p>
                  <span>{ingredients.length} Ingredients | </span>
                  <span>{steps.length} Steps</span>
                </p>
              </div>
            )
        }

    }

    render(
        <Summary title="Peanut Butter and Jelly"
               ingredients="peanut butter, jelly, bread"
               steps="spread peanut butter and jelly between bread" />,
        document.getElementById('react-container')
    )

</script>

</body>
</html>
